// 个人中心
<template>
  <div class="content">
    <!-- 个人中心-个人信息 -->
    <div class="message">
      <div class="left">
        <p><img :src="img" alt="" /></p>
        <p>{{ name }}</p>
        <div v-for="(item, index) in myself" :key="index">
          <router-link :to="item.url">
            <p><img :src="item.image" alt="" /></p>
            <p>{{ item.text }}</p>
            <p class="jian"><img :src="item.right" alt="" /></p>
          </router-link>
        </div>
      </div>
      <div class="right">
        <div class="info">
          <p>
            <img src="../../assets/damy.png" alt="" />
            {{ info }}
          </p>
        </div>
        <div class="con">
          <p>头像:</p>

          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="dj">
              <img :src="Img" alt="" />
            </div>
            <button>点击修改</button>
          </el-upload>
        </div>
        <div class="con">
          <p>学号:</p>
          <p>{{ message.number }}</p>
        </div>
        <div class="con">
          <p>真实姓名:</p>
          <p>{{ message.name }}</p>
        </div>
        <div class="con">
          <p>联系电话:</p>
          <p>{{ message.phone }}</p>
        </div>
        <div class="con">
          <p>所属校区:</p>
          <p>{{ message.school }}</p>
        </div>
        <div class="con">
          <p>专业:</p>
          <p>{{ message.major }}</p>
        </div>

        <!-- <el-upload
        action="string"
        :http-request="uploadImg"
        :show-file-list="false"
      >
        <el-button v-perm="'b:img:upload'" size="small" type="primary"
          >点击上传</el-button
        >
      </el-upload>
      <div class="imgStyle mar_top10">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Img: require("../../assets/tx_2.png"),
      imageUrl: "",
      disabled: false,
      name: "用户名称",
      img: require("../../assets/tx_2.png"),
      myself: [
        {
          image: require("../../assets/mynow.png"),
          text: "个人信息",
          right: require("../../assets/you1.png"),
          url: "/Message",
        },
        {
          image: require("../../assets/time.png"),
          text: "历史答卷",
          right: require("../../assets/you.png"),
          url: "/Year",
        },
        {
          image: require("../../assets/shou.png"),
          text: "我的收藏",
          right: require("../../assets/you.png"),
          url: "/Favorite",
        },
      ],
      info: "个人信息",
      message: {
        number: "201902030134",
        name: "王某某",
        phone: "12345678912",
        school: "山东交通职业学院",
        major: "计算机应用技术专业",
      },
    };
  },
  mounted() {
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.content {
  width: 100%;
  font-size: 16px;

  p {
    margin: 0;
  }

  .message {
    width: 65%;
    margin: 0 auto;
    // min-width: 1066px;
    margin-top: 2rem;
    justify-content: space-between;
    display: flex;

    .left {
      width: 22%;
      padding: 2rem 2%;
      box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);
      border-radius: 10px;
      > p {
        text-align: center;
        color: #666666;
        margin-bottom: 1rem;
      }

      > div {
        width: 100%;
        padding: 1rem 0;
        border-top: 1px solid #d0d0d0;
        color: #666666;

        a {
          justify-content: space-between;
          display: flex;
          text-decoration: none;
          color: #666666;
        }

        .jian {
          width: 10%;

          img {
            width: 100%;
            vertical-align: middle;
          }
        }
      }
      > div:nth-child(3) {
        // background: #0096f6;
        > a {
          color: #0096f6 !important;
        }
      }
    }

    .right {
      width: 62%;
      padding: 1.5rem 4%;
      box-shadow: 0px 5px 20px 0px rgba(116, 116, 116, 0.35);

      > div {
        width: 100%;
        // border-radius: 10px;
        // margin-bottom: 2.4rem;
        padding: 1.2rem 0;
        border-bottom: 1px solid #d0d0d0;
      }

      .info {
        color: #0096f6;
        font-size: 24px;

        img {
          width: 4%;
        }
      }

      .con {
        justify-content: left;
        display: flex;
        align-items: center;
        p:first-child {
          margin-left: 6%;
          margin-right: 2%;
          width: 100px;
          height: 30px;
          line-height: 34px;
          text-align: justify;
          display: inline-block;
        }
        p:last-child {
          width: 80%;
          // background: magenta;
          height: 30px;
          line-height: 34px;
          color: #999999;
        }
        p:after {
          content: "";
          display: inline-block;
          width: 100%;
        }

        /deep/ .el-upload--picture-card {
          height: 60px;
          width: 80px;
          line-height: 64px;
        }

        input {
          border: 1px solid #fff;
          outline: none;
        }
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  button {
    margin-top: 10px;
    background: none;
    color: #0096f6;
    border: none;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   width: 72px;
//   height: 72px;
//   line-height: 72px;
//   text-align: center;
// }
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  display: block;
}
</style>